<html>
  <head>
    <title>Shapes Demo - IE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
    ></script>

    <script type="text/javascript" src="redist/jquery.3.7.1.min.js"></script>
    <script
      type="text/javascript"
      src="../dist/jquery.imagemapster.js"
    ></script>

    <!-- <script type="text/javascript" src="redist/zepto.1.2.0.min.js"></script>
    <script
      type="text/javascript"
      src="../dist/jquery.imagemapster.zepto.js"
    ></script> -->

    <link rel="stylesheet" href="stylesheets/base.css" />
    <script type="text/javascript">
      $(document).ready(function () {
        'use strict';

        // eslint-disable-next-line no-unused-vars
        function state_change(data) {
          //alert(data.state+":"+data.selected);
        }
        $('img').mapster({
          onStateChange: state_change,
          fillColor: '0a7a0a',
          fillOpacity: 0.7,
          mapKey: 'group',
          noHrefIsMask: false,
          render_select: {
            fillColor: 'adadad',
            fillOpacity: 0.5
          },
          areas: [
            {
              key: 'blue-circle',
              includeKeys: 'rectangle'
            },
            {
              key: 'rectangle',
              stroke: true,
              strokeWidth: 3
            },
            {
              key: 'outer-circle',
              includeKeys: 'outer-circle-perimeter,inner-circle-perimeter'
            },
            {
              key: 'inner-circle',
              stroke: true,
              strokeColor: 'adadad',
              strokeWidth: 3,
              fill: true
            },
            {
              key: 'outer-circle-perimeter',
              stroke: true,
              strokeWidth: 3,
              fill: false
            },
            {
              key: 'inner-circle-perimeter',
              stroke: true,
              strokeWidth: 3,
              fill: false
            }
          ]
        });
      });
    </script>
  </head>
  <body>
    <div class="navmenu">
      Return to <a href="index.html">Main Menu</a>
      <hr />
    </div>

    <h2>Shapes Demo (For Full IE Compatibility)</h2>
    <p>
      While masks sort of work for Internet Explorer 6-8, if you really want to
      create areas within areas, you can use polygons to split a shape into two
      connecting parts and combine them as a group. This example is created by
      rendering the outer circle in two "c-shaped" halves and rendering the
      inner circle separately. The other "shapes" demo uses masks and much less
      markup to do the same thing, but more complex situations where the inner
      area is not a solid color might not work as well in IE.
    </p>
    <ul>
      <li>The outer circle is selected independently from the inner circle.</li>
      <li>
        The rightmost rectangle is selected with the center circle (and has
        independent rendering options), but does not itself respond to mouse
        events.
      </li>
    </ul>
    <img
      src="images/shapes.jpg"
      width="512"
      height="176"
      border="0"
      alt=""
      usemap="#shapes_Map"
    />
    <map name="shapes_Map">
      <!-- ImageReady Slices (shapes.jpg) -->
      <area
        shape="rect"
        group="rectangle"
        alt=""
        coords="378,39,463,116"
        nohref
      />
      <area
        shape="poly"
        group="blue-circle"
        alt=""
        coords="286,34, 298,42, 308,54, 314,79, 307,103, 292,118, 270,125, 242,122, 227,112, 216,97, 212,73, 219,53, 227,43, 240,34, 264,29"
        href="#"
      />
      <area
        shape="poly"
        group="outer-circle"
        alt=""
        coords="100,22, 100,46, 90,47, 88,48, 82,51, 73,58, 66,68, 64,81, 65,90, 66,92, 69,98, 77,107, 85,112, 95,115, 100,115, 100,139, 93,138, 83,137, 81,136, 73,133, 71,132, 60,125, 49,113, 42,99, 39,85, 40,69, 41,67, 44,57, 51,45, 65,32, 81,25, 85,24, 91,23"
        href="#"
      />
      <area
        shape="poly"
        group="outer-circle"
        alt=""
        coords="108,23, 123,26, 139,35, 151,48, 158,62, 161,76, 160,92, 159,94, 156,104, 149,116, 135,129, 125,134, 115,137, 109,138, 100,138, 100,115, 111,114, 113,113, 122,108, 132,98, 135,92, 137,83, 136,71, 135,69, 132,63, 124,54, 113,48, 109,47, 105,46, 100,46, 100,22"
        href="#"
      />
      <!-- End ImageReady Slices -->

      <area shape="circle" group="inner-circle" coords="101,81,36" href="#" />

      <!-- concentric circles for stroke highlighting -->
      <area
        shape="circle"
        group="inner-circle-perimeter"
        coords="101,81,36"
        nohref
      />
      <area
        shape="circle"
        group="outer-circle-perimeter"
        coords="100,81,59"
        nohref
      />
      <!-- End circles -->
    </map>
  </body>
</html>
